<template>
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>支付管理</el-breadcrumb-item>
        <el-breadcrumb-item>支付列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24">
      <el-table :data="payInfoList" border stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="100"/>
        <el-table-column prop="user.username" label="用户名" width="250"/>
        <el-table-column label="支付平台" width="180">
          <template #default="scope">
            <el-tag v-if="scope.row.payPlatform == 1" type="success">支付宝</el-tag>
            <el-tag v-if="scope.row.payPlatform == 2" type="info">微信</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="platformNumber" label="支付流水号" width="350"/>
        <el-table-column label="支付状态">
          <template #default="scope">
            <el-tag v-if="scope.row.platformStatus == 'WAIT_BUYER_PAY'" type="success">
              等待买家支付
            </el-tag>
            <el-tag v-if="scope.row.platformStatus == 'TRADE_SUCCESS'" type="info">
              支付成功
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>

import {getCurrentInstance, onMounted} from "vue";

import {getAllPayInfo} from "../../api/payInfo.js";

export default {
  name: "PayList"
  , data() {
    return {
      payInfoList: []
    };
  },
  methods: {
    async loadPayInfoData() {
      const {data: ret} = await getAllPayInfo();
      console.log(ret);
      if (ret['code'] == 4001) {
        // 查询成功
        this.payInfoList = ret['data'];
      }
    }
  },
  setup() {
    const {ctx: ctx} = getCurrentInstance();
    onMounted(() => {
      ctx.loadPayInfoData();
    });
  }
}
</script>

<style scoped>

</style>